<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden address-edit" :style="themeColor()">
		<u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
			<view class="sidebar-margin card-template mt-[var(--top-m)] py-[20rpx]">
				<view class="">
					<u-form-item :label="t('name')" prop="name" labelWidth="200rpx">
						<u-input fontSize="28rpx" v-model.trim="formData.name" border="none" clearable maxlength="25"
							placeholderStyle="color: #888" :placeholder="t('namePlaceholder')" />
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('mobile')" prop="mobile" labelWidth="200rpx">
						<u-input fontSize="28rpx" v-model.trim="formData.mobile" maxlength="11" border="none" clearable
							:placeholder="t('mobilePlaceholder')" placeholderStyle="color: #888" />
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('selectArea')" prop="area" labelWidth="200rpx">
						<view class="flex w-full items-center h-[52rpx]" v-if="addressType == 'address' && isSelectMap != 1"
							@click="selectArea">
							<view v-if="!formData.areaName" class="text-[#888] text-[28rpx] flex-1">{{ t('selectAreaPlaceholder') }}
							</view>
							<view v-else class="text-[28rpx] flex-1 leading-[1.4]">{{ formData.areaName }}</view>
							<view @click.stop="chooseLocation" class="flex items-center">
								<text class="nc-iconfont nc-icon-dizhiguanliV6xx mr-[4rpx] text-[32rpx] text-[#e93323]"></text>
								<text class="text-[24rpx] whitespace-nowrap text-[#e93323]">定位</text>
							</view>
						</view>
						<view v-else class="flex justify-between items-center flex-1 h-[52rpx]" @click="chooseLocation">
							<view class="text-[28rpx] text-[#303133] leading-[1.4]" v-if="formData.areaName || formData.address_name">
								{{ formData.areaName || formData.address_name }}</view>
							<view class="text-[#888] text-[28rpx]" v-else>{{ t('selectAddressPlaceholder') }}</view>
							<view class="flex items-center">
								<text class="nc-iconfont nc-icon-dizhiguanliV6xx text-[32rpx] mr-[4rpx] text-[#e93323]"></text>
								<text class="text-[24rpx] whitespace-nowrap text-[#e93323]">定位</text>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('address')" prop="detailAddress" labelWidth="200rpx">
						<u-input fontSize="28rpx" v-model="formData.detailAddress" border="none" clearable maxlength="120"
							:placeholder="t('addressPlaceholder')" placeholderStyle="color: #888" />
					</u-form-item>
				</view>
			</view>
			<view class="sidebar-margin card-template mt-[var(--top-m)] py-[10rpx]">
				<u-form-item :label="t('defaultAddress')" prop="name" :border-bottom="false" labelWidth="200rpx">
					<u-switch v-model="formData.defaultStatus" size="20" activeColor="var(--primary-color)"
						inactiveColor="var(--temp-bg)" />
				</u-form-item>
			</view>
		</u-form>
		<view class="w-full footer">
			<view class="py-[var(--top-m)] px-[var(--sidebar-m)] footer w-full fixed bottom-0 left-0 right-0 box-border">
				<button hover-class="none"
					class="primary-btn-bg !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
					@click="save" :disabled="btnDisabled" :loading="operateLoading" :class="{ 'opacity-50': btnDisabled }">{{
						t('save') }}</button>
			</view>
		</view>
		<area-select ref="areaRef" @complete="areaSelectComplete" :area-id="formData.district_id" />
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
	</view>

</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { redirect } from '@/utils/common'
import { t } from '@/locale'
import { addAddress, editAddress, getAddressInfo } from '@/app/api/member'
import manifestJson from '@/manifest.json'
import { getAddressByLatlng } from '@/app/api/system'

const formData: any = ref({
	id: 0,
	name: '',
	mobile: '',
	province_id: 0,
	city_id: 0,
	district_id: 0,
	lat: '',
	lng: '',
	detailAddress: '',
	address_name: '',
	full_address: '',
	defaultStatus: false,
	areaName: ''
})
const areaRef = ref()
const formRef: any = ref(null)
const source = ref('')
const btnDisabled = ref(false)
const isSelectAddress = ref(false)
const addressType = ref('address');
const isSelectMap = ref(2) // 值为1，该地址需要有经纬度，反之不需要

const wxPrivacyPopupRef: any = ref(null)

onLoad((data: any) => {
	isSelectMap.value = data.isSelectMap || '';
	const selectAddress = uni.getStorageSync('selectAddressCallback')
	if (data.id) {
		getAddressInfo(data.id).then((res: any) => {
			res.data && Object.assign(formData.value, res.data)
			formData.value.district_id = res.data.areaId
			// 兼容待支付页面编辑地址
			if (selectAddress) {
				addressType.value = selectAddress.delivery == '1' ? 'address' : 'locationAddress';
			}
		})

	} else if (data.name) {
		if (uni.getStorageSync('addressInfo')) {
			Object.assign(formData.value, uni.getStorageSync('addressInfo'))
		}
		formData.value.detailAddress = data.name;
		getAddress(data.latng);
		var tempArr = getQueryVariable('latng').split(',');
		formData.value.lat = tempArr[0];
		formData.value.lng = tempArr[1];
	}
	source.value = data.source || ''
	if (selectAddress) {
		addressType.value = selectAddress.delivery == '1' ? 'address' : 'locationAddress';
	}
	// #ifdef MP
	nextTick(() => {
		if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
	})
	// #endif
})

const rules = computed(() => {
	return {
		'name': {
			type: 'string',
			required: true,
			message: t('namePlaceholder'),
			trigger: ['blur', 'change'],
		},
		'mobile': [
			{
				type: 'string',
				required: true,
				message: t('mobilePlaceholder'),
				trigger: ['blur', 'change'],
			},
			{
				validator(rule: any, value: any, callback: any) {
					let mobile = /^1[3-9]\d{9}$/;
					if (!mobile.test(value)) {
						callback(new Error(t('mobileError')))
					} else {
						callback()
					}
				}
			}
		],
		'area': {
			validator() {
				let bool = true;
				if (uni.$u.test.isEmpty(formData.value.areaName) && uni.$u.test.isEmpty(formData.value.address_name)) {
					bool = false;
				}
				return bool
			},
			message: t('selectAreaPlaceholder')
		},
		'address': {
			type: 'string',
			required: true,
			message: t('addressPlaceholder'),
			trigger: ['blur', 'change']
		}
	}
})

const selectArea = () => {
	isSelectAddress.value = true
	areaRef.value.open()
}

const areaSelectComplete = (event: any) => {
	if (isSelectAddress.value && (formData.value.province_id == event.province.id || formData.value.city_id != event.city.id || formData.value.district_id != event.district.id)) {
		formData.value.lat = '';
		formData.value.lng = '';
	}
	formData.value.province_id = event.province.id || 0
	formData.value.city_id = event.city.id || 0
	formData.value.district_id = event.district.id || 0
	formData.value.areaName = `${event.province.name || ''}${event.city.name || ''}${event.district.name || ''}`
	isSelectAddress.value = false;
}

const operateLoading = ref(false)
const save = () => {
	const save = formData.value.id ? editAddress : addAddress
	formRef.value.validate().then(() => {
		if (operateLoading.value) return
		operateLoading.value = true

		btnDisabled.value = true

		// formData.value.full_address = formData.value.areaName + formData.value.detailAddress
		formData.value.areaId = formData.value.district_id
		if (isSelectMap.value == 1 && !formData.value.lat && !formData.value.lng) {
			uni.showToast({
				title: '缺少经纬度，请在地图上重新选点',
				icon: 'none'
			});
			operateLoading.value = false;
			btnDisabled.value = false
			return false;
		}

		save(formData.value).then((res: any) => {
			operateLoading.value = false
			setTimeout(() => {
				btnDisabled.value = false
				if (source.value == 'shop_order_payment') {
					const selectAddress = uni.getStorageSync('selectAddressCallback')
					console.log(selectAddress)
					if (selectAddress) {
						selectAddress.address_id = res.data || formData.value.id
						uni.setStorage({
							key: 'selectAddressCallback',
							data: selectAddress,
							success() {
								redirect({ url: selectAddress.back, mode: 'redirectTo' })
							}
						})
					}
				} else {
					redirect({
						url: '/app/pages/member/address',
						mode: 'redirectTo',
						param: { source: source.value }
					})
				}
			}, 1000)
		}).catch(() => {
			operateLoading.value = false
			btnDisabled.value = false
		})
	})
}

// 选择地址
const chooseLocation = () => {
	// #ifdef MP
	uni.chooseLocation({
		success: (res) => {
			res.latitude && (formData.value.lat = res.latitude)
			res.longitude && (formData.value.lng = res.longitude)
			res.address && (formData.value.areaName = res.address)
			res.name && (formData.value.address_name = res.address)
			res.name && (formData.value.detailAddress = res.name)
			if (res.latitude && res.longitude) {
				let latng = res.latitude + ',' + res.longitude;
				getAddress(latng);
			}
		},
		fail: (res) => {
			// 在隐私协议中没有声明chooseLocation:fail api作用域
			if (res.errMsg && res.errno) {
				if (res.errno == 104) {
					let msg = '用户未授权隐私权限，选择位置失败';
					uni.showToast({ title: msg, icon: 'none' })
				} else if (res.errno == 112) {
					let msg = '隐私协议中未声明，打开地图选择位置失败';
					uni.showToast({ title: msg, icon: 'none' })
				} else {
					uni.showToast({ title: res.errMsg, icon: 'none' })
				}
			}
		}
	});
	// #endif

	// #ifdef H5
	var urlencode = formData.value;
	uni.setStorageSync('addressInfo', urlencode);
	let backurl = location.origin + location.pathname + '?source=' + source.value;
	if (isSelectMap.value) {
		backurl = backurl + '&isSelectMap=' + isSelectMap.value
	}
	window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=' + encodeURIComponent(backurl) + '&key=' + manifestJson.h5.sdkConfigs.maps.qqmap.key + '&referer=myapp';
	// #endif
}

//获取详细地址
const getAddress = (latlng: any) => {
	getAddressByLatlng({ latlng }).then((res: any) => {
		if (res.data) {
			formData.value.full_address = '';
			formData.value.full_address += res.data.province != undefined ? res.data.province : '';
			formData.value.full_address += res.data.city != undefined ? '' + res.data.city : '';
			formData.value.full_address += res.data.district != undefined ? '' + res.data.district : '';

			formData.value.address_name = formData.value.full_address.replace(/-/g, '');
			formData.value.areaName = (res.data.province + res.data.city + res.data.district) || res.data.full_address;

			formData.value.province_id = res.data.province_id != undefined ? res.data.province_id : 0;
			formData.value.city_id = res.data.city_id != undefined ? res.data.city_id : 0;
			formData.value.district_id = res.data.district_id != undefined ? res.data.district_id : 0;
		} else {
			uni.showToast({ title: res.msg, icon: 'none' })
		}
	})

}

const getQueryVariable = (variable: any) => {
	var query = window.location.search.substring(1);
	var vars = query.split('&');
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split('=');
		if (pair[0] == variable) {
			return pair[1];
		}
	}
	return false;
}
</script>

<style lang="scss" scoped>
.address-edit :deep(.u-form-item__body__left__content__label) {
	font-size: 28rpx !important;
}

.address-edit :deep(.u-form-item__body__right) {
	display: flex;
}

.footer {
	height: calc(100rpx + var(--top-m) + var(--top-m) + constant(safe-area-inset-bottom)) !important;
	height: calc(100rpx + var(--top-m) + var(--top-m) + env(safe-area-inset-bottom)) !important;
}
</style>